<template>
  <div class="data_left07">
    <div class="dataAllBorder01">
      <div class="data_tit3">
        <el-tooltip placement="top-start">
          <template #content> 统计规则：<br />事业单位的总体个数、每单位平均编制数、领导职数占编制比等数值，与平均值进行对比 </template>
          <span>事业单位编制和领导职数情况</span></el-tooltip
        >
      </div>
      <!--TAB切换-->
      <div
        id="sybzandldzs"
        style="width: 98%; height: calc(100% - 40px); float: left"
      ></div>
    </div>
    </div>
</template>
<script>
var myChart;
import Sever from "@/api/selfApi.js";
export default {
  props: ["selectCode"],
  name: "SybzAndLdzs",
  data() {
    return {
    
      desp: [],
      sydwnumData: [],
	  avgbzData: [],
	  ldbzbzData: [],
      VALUE: [100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400],
      option: {
   backgroundColor: '#03213D',
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'cross',
         crossStyle: {
            color: '#999'
         }
      }
   },
  grid: {
    left: '4%',
    top: '7%',
    bottom: '12%',
    right: '8%',
    containLabel: true,
  	width:1450
  },
   color: ['#5AD8A6'],
   legend: {
      right: 10,
     top: 12,
     textStyle: {
       color: '#fff'
     },
     itemWidth: 12,
     itemHeight: 10,
     // itemGap: 35
   },
 
   xAxis: [
      {
         type: 'category',
         data: [2023.08, 2023.09, 2023.1, 2023.11, 2023.12],
         axisPointer: {
            type: 'shadow'
         },
          axisLine: {
      lineStyle: {
        color: '#BDD8FB',
        width: 1 // 这里是为了突出显示加上的
      }
    },
    axisLabel: {
		interval: 0,
      textStyle: {
        color: '#BDD8FB',
        fontSize: 12
      },
	 
    }
      }
   ],
   yAxis: [
      {
         type: 'value',
          axisLine: {
      show: false,
      lineStyle: {
        color: 'white'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.15)'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#BDD8FB'
      }
    }
      },
      
   ],
  //  dataZoom: [{
  //   show: true,
  //   height: 2,
  //   xAxisIndex: [
  //     0
  //   ],
  //   bottom: '8%',
  //   start: 0,
  //   end: 30,
  //   handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
  //   handleSize: '110%',
  //   handleStyle: {
  //     color: '#d3dee5'

  //   },
  //   textStyle: {
  //     color: '#fff'
  //   },
  //   borderColor: '#90979c'
  // }, {
  //   type: 'inside',
  //   show: true,
  //   height: 15,
  //   start: 0,
  //   end: 30
  // }],
   series: [
      {
         name: '事业单位总数',
         type: 'bar',
         barWidth: 30,
         itemWidth: 8,
         itemHeight: 8,
         itemStyle: {
            color: '#3e66ff',
            borderRadius: 0
         },
         data: [2,2, 2, 2, 2],
		 label: {
		         show: false  // 设置标签不显示
		       }
      },
      {
         name: '每单位平均编制数',
         type: 'line',
         symbol: 'circle',
         symbolSize: 10,
         lineStyle: {
            color: '#26c4b9'
         },
         label: {
            show: true,
            position: 'top'
         },
         data: [1.58, 1.64, 1.69, 1.58, 1.88],
		 label: {
		         show: false  // 设置标签不显示
		       }
      },
       {
         name: '领导职数占编制百分比',
         type: 'line',
         symbol: 'circle',
         symbolSize: 10,
         lineStyle: {
            color: '#FFD700'
         },
         label: {
            show: true,
            position: 'top'
         },
         data: [3, 3, 3,3, 3],
		 label: {
		         show: false  // 设置标签不显示
		       }
      }
   ]
},
    };
  },
  components: {
    Sever
  },
  watch: {
    selectCode(newV) {
      this.refreshData();
    },
  },
  methods: {
	  saveImageToBackend() {
	        // 将 echarts 图表转换为图片
	        const base64Data = myChart.getDataURL({
	          pixelRatio: 2,
	        });
	        
	        // 构建请求体数据
	        const requestData = {
	          image: base64Data,
	          depCode:this.selectCode,
	  			  name:this.selectCode+"4"+".png"
	        };
	  			
	  		
	        
	        Sever.smz
	            .getSaveImage(requestData)
	            .then((res) => {
	             
	            })
	            .catch((err) => {
	              console.log(err);
	            });
	        
	      },
	  averageNumber(arr) {
	         const sum = arr.reduce((acc, cur) => acc + cur, 0);
	         const average = (sum / arr.length)||0;
	         return Math.round(average); // 对平均数进行四舍五入处理
	       },
	averagebzs(sydwnum,bz) {
	       const average = (bz / sydwnum)||0;
	       return Math.round(average); // 对平均数进行四舍五入处理
	     },
		 averageldzs(ldzs,bz) {
		        const average = (ldzs*100 / bz)||0;
		        return Math.round(average); // 对平均数进行四舍五入处理
		      },
    async refreshData() {
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = this.$echarts.init(document.getElementById("sybzandldzs"));
      myChart.clear();
      myChart.showLoading("default", {
        text: "正在加载，请稍候...",
        color: "#c23531",
        textColor: "rgba(255, 255, 255, 0.5)",
        maskColor: "#00000000",
        zlevel: 0,
      });
	    
      await Sever.smz
        .getSybzAndLdzs({ depCode: this.selectCode })
        .then((res) => {
          if (res.code == 1) {
            console.log(res.data);
            let data = res.data;
            this.desp = [];
            this.sydwnumData= [];
            this.avgbzData= [];
            this.ldbzbzData= [];
            for (let index = 0; index < data.length; index++) {
              this.desp.push(data[index].desp);
              this.sydwnumData.push(data[index].sydwnum);
			  this.avgbzData.push(this.averagebzs(data[index].sydwnum,data[index].bz));
			  this.ldbzbzData.push(this.averageldzs(data[index].ldbz,data[index].bz));
            }

            this.initEcharts();
          } else {
            console.log("接口请求错误！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initEcharts() {
      myChart.hideLoading();

     this.option.xAxis[0].data=this.desp;
	 this.option.xAxis[0].data.push("平均值");
     this.option.series[0].data=this.sydwnumData;
	  this.option.series[0].data.push(this.averageNumber(this.sydwnumData));
     this.option.series[1].data=this.avgbzData;
	 
	  this.option.series[1].data.push(this.averageNumber(this.avgbzData));
     this.option.series[2].data=this.ldbzbzData;
	   this.option.series[2].data.push(this.averageNumber(this.ldbzbzData));


      this.option && myChart.setOption(this.option);
      // 重置option属性
      this.option = this.$options.data.call(this).option;

      

      // 响应式变化
      window.addEventListener("resize", () => myChart.resize(), false);
    },
  },
  mounted() {
    this.refreshData();
  },
};
</script>